<template>
 <div>
    <el-button @click="dialogVisible = true">上架商品</el-button>
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        >
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="商品名称" prop="name"  >
                    <el-select v-model="ruleForm.name" placeholder="请选择" @change="changeColor" >
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                       >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品价格" prop="price">
                    <el-input v-model="ruleForm.price" type="number"></el-input>
                </el-form-item>
                <el-form-item label="内存大小" prop="size">
                    <el-select v-model="ruleForm.size" placeholder="请选择内存">
                        <el-option label="无内存" value="无内存" :disabled="!airsize "></el-option>
                        <el-option label="64 G" value="64 G" :disabled= "airsize || !macairm1 || !macairm2  || !macpro || !airpods"></el-option>
                        <el-option label="128 G" value="128 G" :disabled= "ipdSize || ipdmSize || airsize || !macairm1 || !macairm2 || !macpro || !airpods"></el-option>
                        <el-option label="256 G" value="256 G" :disabled= "airsize || macproSize"></el-option>
                        <el-option label="512 G" value="512 G" :disabled= "ipdSize || airsize || !macairm1"></el-option>
                        <el-option label="1 TB" value="1 TB" :disabled= "!ipdmSize"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="颜色" prop="color">
                    <el-select v-model="ruleForm.color" placeholder="请选择商品颜色">
                        <el-option label="白色" value="白色" :disabled = "(notShow && airpods )"></el-option>
                        <el-option label="红色" value="红色" :disabled = "(notShow && i14 && i13 && i12 && ise)"></el-option>
                        <el-option label="绿色" value="绿色" :disabled = "(notShow && i13 && i12 && airpodsPro && awatchse && awatchultra)"></el-option>
                        <el-option label="金色" value="金色" :disabled = "(notShow && i14 && ip14 && i13 && i12 && ise && ipda && ipdnew && ipdmn && awatch && awatchse && awatchultra && macairm1 && macairm2)"></el-option>
                        <el-option label="银色" value="银色" :disabled = "(notShow && ip14 && ipdm && ipdnew && ipdold && airpodsPro && awatch && awatchman && macairm1 && macairm2 && macpro)"></el-option>
                        <el-option label="蓝色" value="蓝色" :disabled = "(notShow && i14 && i13 && i12 && ipda && ipdnew && airpodsPro && awatch && awatchse)"></el-option>
                        <el-option label="粉色" value="粉色" :disabled = "(notShow && i13 && ipda && ipdnew && ipdmn && airpodsPro && awatch && awatchse && awatchultra)"></el-option>
                        <el-option label="深空灰" value="深空灰" :disabled = "(notShow && ipdm && ipda && ipdold && ipdmn && airpodsPro && awatch && awatchse && macairm1 && macairm2 && macpro)"></el-option>
                        <el-option label="深空黑" value="深空黑" :disabled = "(notShow && i14 && ip14 && i13 && i12 && ise && awatchman && macairm2)"></el-option>
                        <el-option label="暗夜紫" value="暗夜紫" :disabled = "(notShow && i14 && ip14 && i12 && ipda && ipdmn && awatch)"></el-option>
                        
                    </el-select>
                </el-form-item>
                <el-form-item label="商品描述" prop="advantage">
                    <el-input type="textarea" v-model="ruleForm.advantage"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
    </el-dialog>
 </div>
</template>

<script>
export default{
    name: '',
    components: {},
    data() {
        return {
            notShow:true,
            i14:true,
            ip14:true,
            i13:true,
            i12:true,
            ise:true,
            ipdm:true,
            ipda:true,
            ipdnew:true,
            ipdold:true,
            ipdmn:true,
            airpods:true,
            airpodsPro:true,
            awatch:true,
            awatchse:true,
            awatchultra:true,
            awatchman:true,
            macairm1:true,
            macairm2:true,
            macpro:true,
            airsize:false, 
            ipdmSize:false,
            ipdSize:false,
            macproSize:false,
            options:[
                {
                label:'iphone14',
                value:'iphone14'
                },
                {
                label:'iphone14Plus',
                value:'iphone14Plus'
                },
                {
                label:'iphone14Pro',
                value:'iphone14Pro'
                },
                {
                label:'iphone14ProMax',
                value:'iphone14ProMax'
                },
                {
                label:'iphone13',
                value:'iphone13'
                },
                {
                label:'iphone13Mini',
                value:'iphone13Mini'
                },
                {
                label:'iphone12',
                value:'iphone12'
                },
                {
                label:'iphoneSE',
                value:'iphoneSE'
                },
                {
                label:'ipad2022',
                value:'ipad2022'
                },
                {
                label:'ipad2020',
                value:'ipad2020'
                },
                {
                label:'ipadMini2022',
                value:'ipadMini2022'
                },
                {
                label:'ipadPro2022',
                value:'ipadPro2022'
                },
                {
                label:'ipadProMax2022',
                value:'ipadProMax2022'
                },
                {
                label:'ipadAir2022',
                value:'ipadAir2022'
                },
                {
                label:'AirPods(第二代)',
                value:'AirPods(第二代)'
                },
                {
                label:'AirPods(第三代)',
                value:'AirPods(第三代)'
                },
                {
                label:'AirPodsPro',
                value:'AirPodsPro'
                },
                {
                label:'AirPodsMax',
                value:'AirPodsMax'
                },
                {
                label:'AppleWatch',
                value:'AppleWatch'
                },
                {
                label:'AppleWatchSE',
                value:'AppleWatchSE'
                },
                {
                label:'AppleWatchUltra',
                value:'AppleWatchUltra'
                },
                {
                label:'AppleWatchHermes',
                value:'AppleWatchHermes'
                },
                {
                label:'MacBookAir(M1芯片)',
                value:'MacBookAir(M1芯片)'
                },
                {
                label:'MacBookAir(M2芯片)',
                value:'MacBookAir(M2芯片)'
                },
                {
                label:'MacBookPro(M2芯片)13英寸',
                value:'MacBookPro(M2芯片)13英寸'
                },
                {
                label:'MacBookPro(M2芯片)14英寸',
                value:'MacBookPro(M2芯片)14英寸'
                },
                {
                label:'MacBookPro(M2芯片)16英寸',
                value:'MacBookPro(M2芯片)16英寸'
                },
                {
                label:'MacMini(M1芯片)',
                value:'MacMini(M1芯片)'
                },
                {
                label:'MacStudio(M1芯片)',
                value:'MacStudio(M1芯片)'
                },
            ],
            value:'',
            dialogVisible: false,
            ruleForm: {
                name: '',
                price:'',
                size:'',
                color:'',
                advantage:'',
                id:0,
                },
            rules: {
                name: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                    { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
                ],
                price: [
                    { required: true, message: '请输入商品价格', trigger: 'blur' }
                ],
                size: [
                    { required: true, message: '请选择内存大小', trigger: 'change' }
                ],
                color: [ 
                    { required: true, message: '请选择商品颜色', trigger: 'change' }
                ],
                advantage: [
                    { required: true, message: '请填写商品描述', trigger: 'blur' }
                ]
            }
        };
        
    },
    methods: {
        callback(){
            this.notShow = true
            this.i14 = true
            this.ip14 = true
            this.i13 = true
            this.i12 = true
            this.ise = true
            this.ipdm = true
            this.ipdm = true
            this.ipda = true
            this.ipdnew = true
            this.ipdold = true
            this.ipdmn = true
            this.airpods = true
            this.airpodsPro = true
            this.awatch = true
            this.awatchse = true
            this.awatchultra = true
            this.awatchman = true
            this.macairm1 = true
            this.macairm2 = true
            this.macpro = true
            this.airsize = false
            this.ipdmSize = false
            this.ipdSize = false
            this.macproSize = false
        },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$emit('addAppledata',this.ruleForm)
            this.$refs[formName].resetFields()
            this.dialogVisible = false 
            this.callback();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.callback();
      },
      changeColor(){
        this.ipdSize = false;
        this.callback();
         if(this.ruleForm.name === 'iphone14' || this.ruleForm.name === 'iphone14Plus'){
                this.i14 = false   
            }else if(this.ruleForm.name === 'iphone14Pro' || this.ruleForm.name === 'iphone14ProMax'){
                this.ip14 = false  
            }else if(this.ruleForm.name === 'iphone13' || this.ruleForm.name === 'iphone13Mini'){
                this.i13 = false  
            }else if(this.ruleForm.name === 'iphone12'){
                this.i12 = false  
            }else if(this.ruleForm.name === 'iphoneSE'){
                this.ise = false     
            }else if(this.ruleForm.name === 'ipadProMax2022' || this.ruleForm.name === 'ipadPro2022'){
                this.ipdm = false
                this.ipdmSize = true
            }else if(this.ruleForm.name === 'ipadAir2022'){
                this.ipda = false
                this.ipdSize = true
            }else if(this.ruleForm.name === 'ipad2022'){
                this.ipdnew = false
                this.ipdSize = true
            }else if(this.ruleForm.name === 'ipad2020'){
                this.ipdold = false
                this.ipdSize = true
            }else if(this.ruleForm.name === 'ipadMini2022'){
                this.ipdmn = false
                this.ipdSize = true
            }else if(this.ruleForm.name === 'AirPodsMax'){
                this.airpodsPro = false
                this.airsize = true
            }else if(this.ruleForm.name === 'AirPods(第二代)' || this.ruleForm.name === 'AirPods(第三代)' || this.ruleForm.name === 'AirPodsPro'){
                this.airsize = true
                this.airpods = false
            }else if(this.ruleForm.name === 'AppleWatch'){
                this.awatch = false
                this.airsize = true
            }else if( this.ruleForm.name === 'AppleWatchSE' ){
                this.awatchse = false
                this.airsize = true
            }else if( this.ruleForm.name === 'AppleWatchUltra' ){
                this.awatchultra = false
                this.airsize = true
            }else if( this.ruleForm.name === 'AppleWatchHermes'){
                this.awatchman = false
                this.airsize = true
            }else if( this.ruleForm.name === 'MacBookAir(M1芯片)'){
                this.macairm1 = false
            }else if( this.ruleForm.name === 'MacBookAir(M2芯片)'){
                this.macairm2 = false
            }else if( this.ruleForm.name === 'MacBookPro(M2芯片)13英寸'){
                this.macpro = false
            }else if( this.ruleForm.name === 'MacBookPro(M2芯片)14英寸' || this.ruleForm.name === 'MacBookPro(M2芯片)16英寸'){
                this.macpro = false
                this.ipdmSize = true
                this.macproSize = true
            }else if( this.ruleForm.name === 'MacMini(M1芯片)' ){
                this.airpods = false
            }else if(this.ruleForm.name === 'MacStudio(M1芯片)' ){
                this.airpods = false
                this.ipdmSize = true
                this.macproSize = true
            }
            else{
                this.$message.error('没有，你去别家吧')
            }
      }
     
    }
} 
</script>

<style scoped lang='scss'></style>